<template>
    <el-dialog @close="onClose" :model-value="dialogVisible" title="Tips" width="30%" draggable>
        <el-form :model="form" :rules="rules" ref="ruleFormRef">
            <el-form-item label="账号" prop="username">
                <el-input v-model="form.username" />
            </el-form-item>
            <el-form-item label="姓名" prop="nickName">
                <el-input v-model="form.nickName" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" />
            </el-form-item>
            <el-form-item label="备注" prop="note">
                <el-input v-model="form.note" type="textarea" />
            </el-form-item>
            <el-form-item label="是否启用" prop="status">
                <el-radio-group v-model="form.status">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="onCancel">取消</el-button>
                <el-button type="primary" @click="onConfirm()">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { reactive, ref, watch } from 'vue';
import * as http from "@/request/http"

const form = reactive({
    username: "",
    nickName: "",
    email: "",
    password: "",
    note: "",
    status: 0,
    id: 1
})

const validateEmail = (_rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('一定要输入邮箱'))
    } else {
        callback()
    }
}

const rules = reactive({
    username: [
        { required: true, message: '请输入账户名称', trigger: 'blur' },
    ],
    nickName: [
        { required: true, message: '请输入用户名称', trigger: 'blur' },
    ],
    email: [
        { required: true, validator: validateEmail, trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入用户名称', trigger: 'blur' },
    ],
    status: [
        { required: true, message: '请输入用户名称', trigger: 'blur' },
    ],
})

const ruleFormRef = ref<FormInstance>()

const props = withDefaults(defineProps<{
    dialogVisible: boolean
    id: number
}>(), {
    dialogVisible: false,
    id: 0
})

const emits = defineEmits<{
    (e: "cancel"): void
    (e: "confirm"): void
}>()

const onCancel = () => {
    emits("cancel")
}

const onAdd = () => {
    ElMessageBox.confirm(
        '此操作将添加当前用户信息，是否继续？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        http.admin.adminRegister(form).then(res => {
            if (res.code === 200) {
                ElMessage.success("添加成功")
                ruleFormRef.value?.resetFields()
                emits("confirm")
            }
        })
    }).catch(() => {
        ElMessage.warning("catch...")
    })
}

const onEdit = () => {
    ElMessageBox.confirm(
        '此操作将修改当前用户信息，是否继续？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        http.admin.adminUpdata(form).then(res => {
            if (res.code === 200) {
                ElMessage.success("修改成功")
                ruleFormRef.value?.resetFields()
                emits("confirm")
            }
        })
    }).catch(() => {
        ElMessage.warning("catch...")
    })
}

const onConfirm = () => {
    ruleFormRef.value?.validate((valid) => {
        if (valid) {
            if (props.id === 0) {
                onAdd()
            } else {
                onEdit()
            }
        } else {
            ElMessage.warning("提交失败")
            return false
        }
    })
}

watch(
    () => props.id,
    () => {
        if (props.id != 0) {
            http.admin.getAdminInfo(props.id).then(res => {
                Object.assign(form, res.data)
            })
        }
    }
)

const onClose = () => {
    ruleFormRef.value?.resetFields()
    emits("cancel")
}

</script>

<style scoped></style>